<template>
  <div class="shade"></div>
  <div
    class="work-container ground-glass"
    :class="isShowMyAssest ? 'right-move' : ''"
  >
    <div class="work-title">提报工单</div>
    <div class="work-describe">
      <div class="describe-title">问题描述</div>
      <textarea
        class="describe-textarea"
        placeholder="请输入问题描述"
        v-model="problemDescription"
      ></textarea>
      <div class="describe-title">问题类型</div>
      <div class="type-select">
        <div class="type-item">
          <input type="radio" name="type" value="1" v-model="workType" />
          <label>耗材更换</label>
        </div>
        <div class="type-item">
          <input type="radio" name="type" value="2" v-model="workType" />
          <label>设备维修</label>
        </div>
        <div class="type-item">
          <input type="radio" name="type" value="3" v-model="workType" />
          <label>其他</label>
        </div>
      </div>
      <div class="describe-title">提报人</div>
      <div class="describe-title my-name">{{ user.lastname }}</div>
      <div class="describe-title">提报设备</div>
      <div class="select-input" @click="openMyAssets">{{ assetsName }}</div>
    </div>
    <div class="btn-container">
      <div class="work-button submit" @click="handleSubmit">提报</div>
      <div class="work-button cancel" @click="handleCancel">取消</div>
    </div>
  </div>
  <div class="my-assest ground-glass left-move" v-show="isShowMyAssest">
    <div class="assets-box" v-if="assetsList.length > 0">
      <div
        class="assets-item"
        v-for="item in assetsList"
        @click="selectAssets(item)"
      >
        {{ item.zcbhx }}--{{ item.zcmc }}--{{ item.pp }}--{{ item.xh }}--{{
          item.lastname
        }}
        <p>{{ item.bz }}</p>
        <div class="line"></div>
      </div>
    </div>
    <div class="no-assets" v-else>
      <div class="assets-text">暂无设备，如有设备，请联系信息部登记</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { postApply, getAssestList } from "@/api";
import { useStore } from "vuex";
const emit = defineEmits(["closeWorkOrder"]);
const problemDescription = ref("");
const assetsName = ref("请选择设备");
const workType = ref("");
const isShowMyAssest = ref(false);
const assetsList = ref([]);
const assetsId = ref(0);
const store = useStore();
function getUserInfo() {
  const userInfo = store.getters["getUserInfo"];
  return userInfo;
}
const user = getUserInfo();
const handleSubmit = () => {
  if (problemDescription.value.trim() === "") {
    alert("问题描述不能为空");
    return;
  }
  if (workType.value === "") {
    alert("请选择问题类型");
    return;
  }
  if (assetsId.value == 0) {
    alert("请选择设备");
    return;
  }
  // 提交工单的逻辑
  const applyData = {
    device_id: assetsId.value,
    oa_uid: user.id,
    apply_type: workType.value,
    describe: problemDescription.value,
  };
  postApply(applyData)
    .then(({ data: res }) => {
      console.log(res);
      if (res.code == 0) {
        alert("提交成功");
        emit("closeWorkOrder");
      } else {
        alert(res.message);
      }
    })
    .catch((error) => {
      console.error("提交工单失败：", error);
    });
};
const handleCancel = () => {
  // 取消提交的逻辑
  emit("closeWorkOrder");
};
function openMyAssets() {
  isShowMyAssest.value = true;
}
function getMyAssest() {
  getAssestList({
    user_id: user.id,
    page: 1,
    device_id: assetsId.value,
    size: 100,
  }).then(({ data: res }) => {
    if (res.code == 0) {
      assetsList.value = res.data.list.filter((item) => item.zcdl == 1);
    }
  });
}
function selectAssets(item) {
  isShowMyAssest.value = false;
  assetsName.value = `${item.zcmc}--${item.xh}--${item.pp}--${item.lastname}`;
  assetsId.value = item.id;
}
getMyAssest();
</script>

<style scoped lang="less">
.work-container {
  z-index: 10000;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
  width: 500px;
  .work-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  .work-describe {
    .describe-title {
      text-align: left;
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .describe-textarea {
      width: 100%;
      height: 150px;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      resize: none;
      font-size: 16px;
      background-color: rgba(0, 0, 0, 0.027);
      margin-bottom: 10px;
    }
    .type-select {
      display: flex;
      justify-content: space-evenly;
      .type-item {
        display: flex;
        align-items: center;
        input[type="radio"] {
          margin-right: 10px;
        }
      }
    }
    .my-name {
      height: 14px;
      line-height: 14px;
      margin-left: 20px;
      margin-top: 10px;
      font-size: 14px;
    }
    .select-input {
      cursor: pointer;
      padding: 10px;
      width: 100%;
      line-height: 16px;
      margin-top: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
      background-color: rgba(0, 0, 0, 0.027);
      border-radius: 5px;
    }
  }
  .btn-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    .work-button {
      width: 60px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 5px;
      margin-right: 20px;
      cursor: pointer;
    }
    .submit {
      background-color: #6366f1;
      color: #fff;
    }
    .cancel {
      background-color: #fff;
      color: #6366f1;
      border: 1px solid #6366f1;
    }
  }
}
.right-move {
  transform: translate(-100%, -50%);
}
.my-assest {
  width: 500px;
  padding: 20px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-wrap: wrap;
  .assets-box {
    max-height: 600px;
    overflow-y: scroll;
    overflow-x: hidden;
    .assets-item {
      text-align: left;
      line-height: 32px;
      font-size: 20px;
      font-weight: 800;
      border: 1px solid #ccc;
      border-radius: 5px;
      cursor: pointer;
      p {
        font-size: 14px;
        font-weight: 400;
      }
    }
  }
  .no-assets {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    .assets-text {
      font-size: 32px;
      font-weight: bolder;
    }
  }
}
.left-move {
  transform: translate(50%, -50%);
}
</style>
